<template>
    <div class="body">
        <div class="list">
            <div class="nav-header">
                <mt-navbar v-model="selected" @input="selectStatus">
                    <mt-tab-item id="0">未接单</mt-tab-item>
                    <mt-tab-item id="1">已接单</mt-tab-item>
                    <mt-tab-item id="2">待配送</mt-tab-item>
                    <mt-tab-item id="3">配送中</mt-tab-item>
                    <mt-tab-item id="4">已送达</mt-tab-item>
                    <mt-tab-item id="5">已完成</mt-tab-item>
                    <mt-tab-item id="6">已评价</mt-tab-item>
                    <!-- <mt-tab-item id="7">系统评价</mt-tab-item> -->
                    <mt-tab-item id="-1">退款中</mt-tab-item>
                    <mt-tab-item id="-2">已退款</mt-tab-item>
                    <mt-tab-item id="-3">未退款</mt-tab-item>
                    <mt-tab-item id="-4">已取消</mt-tab-item>
                </mt-navbar>
            </div>
                <mt-tab-container v-model="selected">
                    <mt-tab-container-item id="0" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                        <StoreOrderList v-for="(i,k) of storeList" :key="k" :i="i"></StoreOrderList>
                        <div class="hint" v-if="!storeList.length">暂无订单~</div>
                    </mt-tab-container-item>
                    <mt-tab-container-item id="1" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                        <StoreOrderList v-for="(i,k) of storeList" :key="k" :i="i"></StoreOrderList>
                        <div class="hint" v-if="!storeList.length">暂无订单~</div>
                    </mt-tab-container-item>
                    <mt-tab-container-item id="2" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                        <StoreOrderList v-for="(i,k) of storeList" :key="k" :i="i"></StoreOrderList>
                        <div class="hint" v-if="!storeList.length">暂无订单~</div>
                    </mt-tab-container-item>
                    <mt-tab-container-item id="3" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                        <StoreOrderList v-for="(i,k) of storeList" :key="k" :i="i"></StoreOrderList>
                        <div class="hint" v-if="!storeList.length">暂无订单~</div>
                    </mt-tab-container-item>
                    <mt-tab-container-item id="4" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                        <StoreOrderList v-for="(i,k) of storeList" :key="k" :i="i"></StoreOrderList>
                        <div class="hint" v-if="!storeList.length">暂无订单~</div>
                    </mt-tab-container-item>
                    <mt-tab-container-item id="5" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                        <StoreOrderList v-for="(i,k) of storeList" :key="k" :i="i"></StoreOrderList>
                        <div class="hint" v-if="!storeList.length">暂无订单~</div>
                    </mt-tab-container-item>
                    <mt-tab-container-item id="6" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                        <StoreOrderList v-for="(i,k) of storeList" :key="k" :i="i"></StoreOrderList>
                        <div class="hint" v-if="!storeList.length">暂无订单~</div>
                    </mt-tab-container-item>
                    <mt-tab-container-item id="7" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                        <StoreOrderList v-for="(i,k) of storeList" :key="k" :i="i"></StoreOrderList>
                        <div class="hint" v-if="!storeList.length">暂无订单~</div>
                    </mt-tab-container-item>
                    <mt-tab-container-item id="-1" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                        <StoreOrderList v-for="(i,k) of storeList" :key="k" :i="i"></StoreOrderList>
                        <div class="hint" v-if="!storeList.length">暂无订单~</div>
                    </mt-tab-container-item>
                    <mt-tab-container-item id="-2" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                        <StoreOrderList v-for="(i,k) of storeList" :key="k" :i="i"></StoreOrderList>
                        <div class="hint" v-if="!storeList.length">暂无订单~</div>
                    </mt-tab-container-item>
                    <mt-tab-container-item id="-3" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                        <StoreOrderList v-for="(i,k) of storeList" :key="k" :i="i"></StoreOrderList>
                        <div class="hint" v-if="!storeList.length">暂无订单~</div>
                    </mt-tab-container-item>
                    <mt-tab-container-item id="-4" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                        <StoreOrderList v-for="(i,k) of storeList" :key="k" :i="i"></StoreOrderList>
                        <div class="hint" v-if="!storeList.length">暂无订单~</div>
                    </mt-tab-container-item>
                </mt-tab-container>
        </div>
        <section class="login_message" :class="isShowBox?'popDownBox':'popUpBox'">
            <div class="iconfont  up-icon" :class="isShowBox?'icon-xiangshangyidong':'icon-yidong-copy'" @click="showPopUpBox"></div>
            <mt-button class="btn" @click="openStatus">{{$store.getters.userInfo.is_open?'开始营业':'暂停营业'}}</mt-button>
        </section>
    </div>
</template>
<script>
import { getMyOrderList,businessStatus,statusGetList,refund } from '../api'
import {Toast,MessageBox} from 'mint-ui'
import StoreOrderList from '../components/storeOrderList'
export default {
    data() {
        return {
            page:1,
            limit:10,
            selected:"0",
            storeList:[],
            loading:false,
            isShowBox:true
        }
    },
    components:{StoreOrderList},
    created(){
    },
    methods:{
        loadMore() {
            // Indicator.open('加载中...');
            this.loading = true;
            this.orderList(this.selected)
        },
        showPopUpBox(){
            this.isShowBox = !this.isShowBox 
        },
        orderList(i){
            const data = {
                token:this.$store.getters.token,
                page:this.page,
                limit:this.limit,
                status:i
            }
            statusGetList(data).then(res=>{
                console.log(res);
                if(res.code!==200){
                    Toast(res.msg);
                }else{
                    // Indicator.close();
                    if(!res.data.list){
                        this.loading = true;
                    }else{
                        if(res.data.list == 0){
                            this.loading = true;
                        }else{
                            for(let i of res.data.list){
                                this.storeList.push(i);
                            }
                            this.page +=1;
                            this.loading = false;
                        }
                        
                    } 
                }
            })
        },
        openStatus(){
            const data = {
                token:this.$store.getters.token,
                status:this.$store.getters.userInfo.is_open?0:1
            }
            MessageBox.confirm(this.$store.getters.userInfo.is_open?'确认开始营业?':'确认停止营业?').then(action => {
                businessStatus(data).then(res=>{
                    // console.log(res);
                    Toast(res.msg);
                    if(res.code==200){
                        this.$store.commit("STORE_STATUS")
                    }
                    
                })
            });
        },
        selectStatus(){
            this.storeList = [];
            this.page = 1;
            this.orderList(this.selected);
        }
    }
}
</script>
<style scoped>
    .body{
        height: Calc(100vh - 7rem);
        /* position: relative; */
        background: #f2f2f2;
    }
    .hint{
        line-height: 5rem;
        text-align: center;
        font-weight: 700;
    }
    .btn{
        margin: 0.4rem auto;
        background: #F0463C;
        color: #fff;
    }
    .list{
        height: Calc(100vh - 7rem);
        overflow: auto;
    }
    .popUpBox{
        width: 100%;
        position: fixed;
        bottom: 4rem;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(100, 100, 100, 0.5);
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        transition: bottom 2s;
    }
    .popDownBox{
        bottom: 0rem;
        background: rgba(100, 100, 100, 0.5);
        transition: bottom 2s;
    }
    .up-icon{
        color: #fff;
        width: 20%;
        height: 3rem;
        position: absolute;
        top: -3rem;
        background: rgba(100, 100, 100, 0.5);
        left: 50%;
        transform: translateX(-50%);
        line-height: 3rem;
        font-size: 2rem;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
    }
    .nav-header{
        width: 100%;
        overflow: auto;
    }
    .mint-navbar{
        width: 45rem;
    }
    .mint-tab-item-label{
        font-size: 1.2rem;
    }
    .mint-navbar .mint-tab-item.is-selected{
        color: #F0463C;
        border-bottom: 0.02rem solid #F0463C;
    }
    .body >>> .mint-tab-item-label{
        line-height: 0;
    }
</style>